<section>
     <ul class="myprofile" [ngStyle]="tagData.data[0].cssStyle | styleFilter">
        <ng-container *ngFor="let item of tagData.data">
            <!--跳转页面-->
            <ng-container *ngIf="item.tagStyle==='link'">
                <li *ngIf="item.isMarginBottom&&item.isMarginBottom!=='false'" class="margin-bottom"></li>
                <li class="item link" appDebounceClick (debounceClick)="jumpToPage(item)" [ngClass]="{'border':item.isLine}">
                    <div class="li-div">
                        <ng-container *ngIf="item.icon">
                            <img class="icon-left" src="{{item.icon}}" alt="">
                        </ng-container>
                        <label [ngStyle]="item?.cssStyle | styleFilter">{{item.label}}</label>
                    </div>
                    <div>
                        <ng-container *ngIf="item.isArrow">
                            <img src="assets/icon/personal center_icon_arrow_right@3x.png"
                                class="fr icon-right" alt="">
                        </ng-container>
                    </div>
                </li>
            </ng-container>
            <!--蜂喔用户1.9.20 新增读取手机号码-->
            <ng-container *ngIf="item.tagStyle==='aboutUs'">
                <li class="item link" appDebounceClick (debounceClick)="jumpToPage(item)" [ngClass]="{'border':item.isLine}">
                    <div class="li-div">
                        <ng-container *ngIf="item.icon">
                            <img class="icon-left" src="{{item.icon}}" alt="">
                        </ng-container>
                        <label [ngStyle]="item?.cssStyle | styleFilter">{{item.label}}</label>
                    </div>
                    <div class="aboutUsRight">
                        <span class="localAppVersion">{{localAppVersion}}</span>
                        <ng-container *ngIf="item.isArrow">
                            <img src="assets/icon/personal center_icon_arrow_right@3x.png"
                                class="fr icon-right" alt="">
                        </ng-container>
                    </div>
                </li>
            </ng-container>
             <!--清除缓存-->
             <ng-container *ngIf="item.tagStyle==='clearCache'">
                <li class="item link" appDebounceClick (debounceClick)="clearCache()" [ngClass]="{'border':item.isLine}">
                    <div class="li-div">
                        <ng-container *ngIf="item.icon">
                            <img class="icon-left" src="{{item.icon}}" alt="">
                        </ng-container>
                        <label [ngStyle]="item?.cssStyle | styleFilter">{{item.label}}</label>
                    </div>
                    <div class="aboutUsRight">
                        <span class="localAppVersion">{{cacheSize}}</span>
                    </div>
                </li>
            </ng-container>

            <!--拨打号码-->
            <ng-container *ngIf="item.tagStyle==='phone'">
                <li class="item phone" [ngClass]="{'border':item.isLine}" appDebounceClick (debounceClick)="call(item.phone)" [ngStyle]="item.cssStyle | styleFilter">
                    <div class="li-div">
                        <ng-container *ngIf="item.icon">
                            <img class="icon-left" src="{{item.icon}}" alt="">
                        </ng-container>
                        <label class="li-div-label" [ngStyle]="item?.cssStyle | styleFilter">{{item.label}}</label>
                    </div>
                    <div class="li-div">
                        <a class="fr mr10 tel">
                            <span>{{item.phone}}</span>
                        </a>
                        <ng-container *ngIf="item.isArrow">
                            <img src="assets/icon/personal center_icon_arrow_right@3x.png" class="icon-right"
                                alt="">
                        </ng-container>
                    </div>
                </li>
            </ng-container>
            <!--注销账号-->
            <ng-container *ngIf="item.tagStyle==='logout'">
                <li class="item logout" appDebounceClick (debounceClick)="logout(item)" [ngClass]="{'border':item.isLine}">
                    <div class="li-div">
                        <ng-container *ngIf="item.icon">
                            <img class="icon-left" src="{{item.icon}}" alt="">
                        </ng-container>
                        <label [ngStyle]="item?.cssStyle | styleFilter">{{item.label}}</label>
                    </div>
                    <div class="aboutUsRight">
                        <span class="localAppVersion"
                            [ngStyle]="effectTimeLabelCssStyle|styleFilter">{{effectTimeLabel}}</span>
                        <ng-container *ngIf="item.isArrow">
                            <img src="assets/icon/personal center_icon_arrow_right@3x.png"
                                class="fr icon-right" alt="">
                        </ng-container>
                    </div>
                </li>
            </ng-container>
            <!--退出页面-->
            <ng-container *ngIf="item.tagStyle==='exit'">
                <li *ngIf="item.isMarginBottom" class="margin-bottom exit"></li>
                <li class="item exit" [ngClass]="{'border':item.isLine}" appDebounceClick (debounceClick)="doLogout(item)">

                    <div class="li-div">
                        <ng-container *ngIf="item.icon">
                            <img class="icon-left" src="{{item.icon}}" alt="">
                        </ng-container>
                        <label class="bold" [ngStyle]="item?.cssStyle | styleFilter">{{item.label}}</label>
                    </div>

                    <ng-container *ngIf="item.isArrow">
                        <img src="assets/icon/personal center_icon_arrow_right@3x.png" class="fr icon-right"
                            alt="">
                    </ng-container>
                </li>
            </ng-container>
            <!--指纹登录 手机端支持指纹登录才显示-->
            <ng-container *ngIf="item.tagStyle==='fingerprint'&&isAvailableFingerPrint===true&&isShowButton">
                <li class="item fingerprint" [ngClass]="{'border':item.isLine}">
                    <div class="li-div">
                        <ng-container *ngIf="item.icon">
                            <img class="icon-left" src="{{item.icon}}" alt="">
                        </ng-container>
                        <label [ngStyle]="item?.cssStyle | styleFilter">{{item.label}}</label>
                    </div>
                    <div class="li-div">
                        <a class="fr mr10 tel">
                        </a>
                        <!--[ngModelOptions]="{standalone: true}"-->
                        <ion-toggle [(ngModel)]="enableFingerPrint" [ngModelOptions]="{standalone: true}"
                            appDebounceClick (debounceClick)="switchToFingerPrintLogin(item)">
                        </ion-toggle>
                    </div>
                </li>
            </ng-container>
            <ng-container *ngIf="item.tagStyle==='normalBtn'">
                <li class="flex-column" [ngClass]="{'border':item.isLine}">
                    <p class="normalBtn-p" *ngIf="item.text">{{item.text}}</p>
                    <div class="normalBtn-div">
                        <div class="li-div">
                            <ng-container *ngIf="item.icon">
                                <img class="icon-left" src="{{item.icon}}" alt="">
                            </ng-container>
                            <label [ngStyle]="item?.cssStyle | styleFilter">{{item.label}}</label>
                        </div>
                        <div class="li-div">
                            <ion-toggle class="toggleBtn" [(ngModel)]="personalized"
                            appDebounceClick (debounceClick)="showBtn(item,'normalBtn')">
                            </ion-toggle>
                        </div>
                    </div>
                </li>
            </ng-container>
            <ng-container *ngIf="item.tagStyle==='normalBtn2'">
                <li class="flex-column" [ngClass]="{'border':item.isLine}">
                    <p class="normalBtn-p" *ngIf="item.text">{{item.text}}</p>
                    <div class="normalBtn-div">
                        <div class="li-div">
                            <ng-container *ngIf="item.icon">
                                <img class="icon-left" src="{{item.icon}}" alt="">
                            </ng-container>
                            <label>{{item.label}}</label>
                        </div>
                        <div class="li-div">
                            <ion-toggle class="toggleBtn" [(ngModel)]="personalized2"
                            appDebounceClick (debounceClick)="showBtn(item,'normalBtn2')">
                            </ion-toggle>
                        </div>
                    </div>
                </li>
            </ng-container>
        </ng-container>
    </ul>
    <div class="cautionBox" [ngStyle]="cautionBoxCssStyle|styleFilter">
        <div class="cautionFirstRowBox" [ngStyle]="cautionFirstRowBoxCssStyle|styleFilter"><img
                *ngIf="cautionFirstLabelIcon" [src]="cautionFirstLabelIcon"
                class="cautionIcon"
                onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1663753687434f6453762fcf4203d099472e0e0378b82.png'"
                [ngStyle]="cautionFirstLabelIconCssStyle|styleFilter" />
            <span [ngStyle]="cautionFirstLabelCssStyle|styleFilter">{{cautionFirstLabel}}</span>
        </div>
        <p class="cautionSecondLabel" *ngIf="cautionSecondLabel1"
            [ngStyle]="cautionSecondLabel1CssStyle|styleFilter">{{cautionSecondLabel1}}</p>
        <p class="cautionSecondLabel" *ngIf="cautionSecondLabel2"
            [ngStyle]="cautionSecondLabel2CssStyle|styleFilter">{{cautionSecondLabel2}}</p>
        <p class="cautionSecondLabel" *ngIf="cautionSecondLabel3"
            [ngStyle]="cautionSecondLabel3CssStyle|styleFilter">{{cautionSecondLabel3}}</p>
    </div>
</section>